import React, {FC, HTMLAttributeAnchorTarget, useContext} from 'react';
import "./index.less";
import {FrontArticle} from "@/services";
import {correspVal, getArticleLocationStr} from "@/utils/biz";
import {HxConfigContext} from "@/layouts/HxConfigContext";
import {Link} from "umi";

interface SearchMediaItemProps {
  record: FrontArticle;
  type: "video" | "chart";
  target?: HTMLAttributeAnchorTarget | undefined;
}

/**
 *  列表检索(图标或视频)项
 */
const SearchMediaItem: FC<SearchMediaItemProps> = (props) => {
  const {record, type, target} = props;
  const {isZhCN} = useContext(HxConfigContext)

  const detailPath = `/journal/${record?.journal?.id || record?.journalId}/article/${record?.id}`;

  return (
    <div className={"search-media-item-container"}>
      <div className={"search-media-item-media"}>
        <Link target={target} to={detailPath} className="hx-article-normal-item-cover">
          <img src={type === "video" ? record.videoCoverUrl : record.figureTableCoverUrl}/>
        </Link>
      </div>
      <div className={"search-media-item-content"}>
        <div className={"search-media-item-title"} title={correspVal(isZhCN, record?.articleTitleCn, record?.articleTitleEn)}>
          <Link target={target} to={detailPath} className="hx-article-normal-item-cover"
                dangerouslySetInnerHTML={{__html: correspVal(isZhCN, record?.articleTitleCn, record?.articleTitleEn) || ""}}>
          </Link>
        </div>
        <div className={"search-media-item-author"} title={correspVal(isZhCN, record?.articleAuthorCn, record?.articleAuthorEn)}>
          {correspVal(isZhCN, record?.articleAuthorCn, record?.articleAuthorEn)}
        </div>
        <div className={"search-media-item-about"}>
          {correspVal(isZhCN, record?.journal?.journalNameCn || record?.journalNameCn, record?.journal?.journalNameEn || record?.journalNameEn)}
          <span style={{marginLeft: 2}}> {getArticleLocationStr(record)}</span>
        </div>
      </div>
    </div>
  );
};

export default SearchMediaItem;
